<template>
    <transition name="slider">
        <div class="score">
            <m-header :canreturn=true :type='4' @server='selectItem'></m-header>
            <div class="tablebox" ref="tablebox">
                <table class="table">
                    <thead>
                        <th>时间</th>
                        <th v-if="showItem === 0">来源</th>
                        <th v-if="showItem === 1">商品</th>
                        <th>分值</th>
                    </thead>
                    <tbody>
                        <scroll class="score-wrapper" :pullUpLoad=pullUpLoad :data=data @pullingUp='getInfo'>
                            <div>
                                <tr class="tr" v-for="(item,index) in showList" :key=index>
                                    <td>{{item.created_at}}</td>
                                    <td>{{item.source}}</td>
                                    <td>{{item.score}}</td>
                                </tr>
                                <div>
                                    <loading :title="moretext" v-show="moreLoading"></loading>
                                </div>
                            </div>
                        </scroll>
                    </tbody>
                </table>
            </div>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
import MHeader from '@/components/m-header/m-header';
import Scroll from '@/base/scroll/scroll';
import Loading from '@/base/loading/loading';
import { getCommonInfoHasData } from '@/base/api/indexpage/getindexinfo';
import { mapGetters } from 'vuex';

export default {
    data() {
        return {
            showList: [],
            recordsList: [],
            exchangeList: [],
            recordsPage: 1,
            recordTotalItem: 20,
            exchangePage: 1,
            exchangeTotalItem: 1,
            showItem: 0,
            pullUpLoad: true,
            data: 0,
            moretext: '',
            moreLoading: false,
            pageSize: 20,
        };
    },
    created() {
        this._getList(0);
        this._getList(1);
        this.showList = this.recordsList;
    },
    mounted() {
        this.$refs.tablebox.style.top = (44 + parseInt(this.statusbar)) + 'px';
    },
    methods: {
        //  头部Item选择
        selectItem(val) {
            this.showItem = val;
            if (this.showItem === 0) {
                this.showList = this.recordsList;
            } else {
                this.showList = this.exchangeList;
            }
        },
        //  监听到上拉请求
        getInfo() {
            if (this.showItem === 0) {
                if (this.recordsPage <= Math.ceil(this.recordTotalItem / this.pageSize)) {
                    this.moreLoading = true;
                    this._getList(this.showItem);
                } else {
                    this.data++;
                }
            } else {
                if (this.exchangePage <= Math.ceil(this.exchangeTotalItem / this.pageSize)) {
                    this.moreLoading = true;
                    this._getList(this.showItem);
                } else {
                    this.data++;
                }
            }
        },
        //  获取数据
        _getList(val) {
            let add = val === 0 ? '/user/score/records' : '/user/score/exchange';
            let page = val === 0 ? this.recordsPage : this.exchangePage;
            getCommonInfoHasData(add, {
                page,
                token: this.getToken,
            }).then((res) => {
                if (res.status_code === 200) {
                    this.data++;
                    this.moreLoading = false;
                    this.pageSize = res.data.pageSize;
                    if (val === 0) {
                        this.recordsPage++;
                        this.recordTotalItem = res.data.total;
                        this.recordsList.push.apply(this.recordsList, res.data.list);
                    } else {
                        this.exchangeTotalItem = res.data.total;
                        this.exchangePage++;
                        this.exchangeList.push.apply(this.exchangeList, res.data.list);
                    }
                } else {
                    plus.nativeUI.toast(res.message);
                }
            });
        },
    },
    computed: {
        ...mapGetters(['getToken', 'statusbar']),
    },
    components: {
        MHeader,
        Scroll,
        Loading,
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

slider();

.score {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background: #ffffff;

    .tablebox {
        position: absolute;
        top: 44px;
        bottom: 0;
        width: 100%;

        .table {
            width: 100%;
            border-collapse: collapse;
            display: box;

            thead {
                display: table;
                width: 100%;

                th {
                    display: table-cell;
                    -webkit-box-flex: 1;
                    -moz-box-flex: 1;
                    box-flex: 1;
                    height: 44px;
                    text-align: center;
                    background: url('./item.png');
                    background-size: 100% 100%;
                    line-height: 44px;
                    color: #ffffff;
                    box-sizing: border-box;
                }
            }

            tbody {
                position: fixed;
                top: 88px;
                bottom: 0;
                width: 100%;

                .score-wrapper {
                    height: 100%;
                    overflow: hidden;

                    tr {
                        display: flex;
                        border-bottom: 1px solid #d6d6d6;
                        height: 44px;
                        width: 100%;

                        &:first-child {
                            border-top: 1px solid #d6d6d6;
                        }

                        td {
                            flex: 1;
                            height: 44px;
                            text-align: center;
                            line-height: 44px;
                            border-right: 1px solid #d6d6d6;

                            &:last-child {
                                border: none;
                            }
                        }
                    }
                }
            }
        }

        .scorewrapper {
            height: 100%;
            overflow: hidden;
        }
    }

    .loading-container {
        loading();
        z-index: 99999;
    }
}
</style>
